<template>
	<view class="page" style="position: relative;">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content" class="text-white">萌宠乐园</block>
		</cu-custom>
		
		<!-- 轮播图 -->
		<view class="padding-0">
			<swiper
				style="height: 350rpx;width: 100%;"
				circular 
				:indicator-dots="indicatorDots" 
				:autoplay="autoplay" 
				:interval="interval"
				:duration="duration">
				<swiper-item v-for="(swiper,swiperIndex) in swiperList" :key="swiperIndex">
					<image style="height: 100%;width: 100%;" :src="swiper.ImageUrl"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 顶部菜单模块 -->
		<view class="margin">
			<uni-grid :column="4" :show-border="false" :highlight="true">
				<uni-grid-item style="height: 150rpx;text-align: center;">
					<view style="text-align: center;">
						<image src="../../static/images/pet02.png" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<text>宠物社区</text>
				</uni-grid-item>
				<uni-grid-item style="height: 150rpx;text-align: center;">
					<view style="text-align: center;">
						<image src="../../static/images/pet01.png" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<text>领养流程</text>
				</uni-grid-item>
				<uni-grid-item style="height: 150rpx;text-align: center;">
					<view style="text-align: center;">
						<image src="../../static/images/pet03.png" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<text>宠物托养</text>
				</uni-grid-item>
				<uni-grid-item style="height: 150rpx;text-align: center;">
					<view style="text-align: center;">
						<image src="../../static/images/pet03.png" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<text>宠物科普</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<!-- 分割线 -->
		<hr class="margin"/>
		
		<!-- 通告栏 -->
		<view class="margin">
			<uni-notice-bar show-icon scrollablecol ="#2979FF" background-color="#EAF2FF" :text="noticeContent" />
		</view>
		
		<!-- 城市列表-->
		<view class="margin">
			<uni-row>
				<uni-col :span="2" >
					<view style="text-align: center;height: 60rpx;line-height: 60rpx;">
						<uni-icons type="location-filled" color="#777" />
					</view>
				</uni-col>
				<uni-col :span="8" style="text-align: left;">
					<!-- 本地数据 -->
					 <!-- <uni-data-picker
					 	placeholder="全国" 
					 	popup-title="请选择所在地区" 
					 	:localdata="ChinaCitysList" 
					 	v-model="children"
						:border="false"
					 	@change="onchange">
					 </uni-data-picker> -->
					 <!-- 自定义插槽 -->
					<uni-data-picker v-slot:default="{ data, error, options }" popup-title="请选择城市" v-model="children" :localdata="ChinaCitysList" @popupclosed="popupclosed"  @change="onchange" ref="picker">
						<view class="input-border">
							<view v-if="error" class="error" style="height: 60rpx;line-height: 60rpx;">
								<text>{{ error }}</text>
							</view>
							<view v-else-if="data.length" class="input-selected" style="height: 60rpx;line-height: 60rpx;">
								<view v-for="(item, index) in data" :key="index" class="selected-item">
									<!-- 显示 省 市 区 三级 -->
									<!-- <text>{{ petCity }}</text> -->
								</view>
								<!-- 显示 省/市/区 -->
								<text style="color: #6c6c6c;font-size: 22rpx;">{{ petCity }}</text>
							</view>
							<view v-else style="height: 60rpx;line-height: 60rpx;">
								<text style="color: #6c6c6c;font-size: 22rpx;">全国</text>
							</view>
						</view>
					</uni-data-picker>
				</uni-col>
				<uni-col :span="14" style="text-align: left;;">
					<view style="height: 60rpx;line-height: 60rpx;">
						<uni-icons v-show="isShow" custom-prefix="iconfont" type="icon-clear" color="#c0c4cc" @click="clearCity" />
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<!-- 宠物领养 -->
		<view style="position: relative;" v-for="(item, index) in cardList" :index="index" :key="index" class="margin">
			<uni-card class="" @click="handleAdoptionInfo(index)">
				<uni-row :gutter="20">
					<uni-col :span="10" style="text-align: center;">
						<image :src="item.ImageUrl" style="height: 250rpx;width: 250rpx;border-radius: 10%;margin-bottom: 0;"></image>
					</uni-col>
					<uni-col :span="14">
						<uni-row class="margin">
							<uni-col :span="24">
								{{item.petName}}，<uni-tag :inverted="true" size="mini" type="success" :text="item.petAge" />
							</uni-col>
						</uni-row>
						<uni-row class="margin">
							<uni-col :span="24">
								<text style="font-size: 20rpx;text-align: center;">{{item.petStory}}</text>
							</uni-col>
						</uni-row>
						<uni-row class="margin">
							<uni-col :span="24">
								<uni-tag 
								v-for="(tag,index1) in item.tagList" 
								:index="index1" :key="index1" 
								:circle="true" 
								:text="tag.tagName" 
								:type="tagType"
								style="margin-left: 2rpx;font-size: 20rpx;"
								size="mini"/>
							</uni-col>
						</uni-row>
					</uni-col>
				</uni-row>
			</uni-card>
			<!-- 右上角标签 -->
			<view class="floating-div">待领养</view>
		</view>
		
		<!-- 悬浮按钮 -->
		<view class="floatBtn" @click="addPetAdoption">
			<uni-icons type="plusempty" color="#0081ff" size="40"></uni-icons>
		</view>
		
		<!-- 底部空白占位 -->
		<view style="height: 100rpx;"></view>
		
		
	</view>
</template>

<script>
	
	import { listNotice } from '@/api/system/notice.js'
	import ChinaCity from "../../static/data/ChinaCitysData.js"
	export default {
		data() {
			return {
				isShow:false,
				//城市子节点
				children:"",
				//中国省份列表
				ChinaCitysList:ChinaCity.data,
				// ChinaCitysList:"",
				// 是否显示面板指示点
				indicatorDots: true,
				// 是否自动切换
				autoplay: true,
				// 自动切换时间间隔
				interval: 2000,
				// 滑动动画时长
				duration: 500,
				//轮播图列表
				swiperList:[
					{
						ImageUrl:'https://img.mp.itc.cn/q_mini,c_zoom,w_640/upload/20170806/36083778a4c543b5a31f40b647bd74bf_th.jpg',
					},
					{
						ImageUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					},
					{
						ImageUrl:'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0507%2F2563f2e3j00qspw60003pc000rt00jrm.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
					}
				],
				//通告内容
				noticeContent:'',
				//宠物所在的城市
				petCity:'全国',
				//宠物领养卡片
				cardList:[
					{
						petName:'流心奶黄包',
						petAge:'4-6月',
						petStory:'流浪狗狗,搬家时在路边捡到的······',
						ImageUrl:"https://pic4.58cdn.com.cn/p1/big/n_v2473d52fbcc6245548f8bae0c9991a855.jpg",
						tagList:[{tagName:'已疫苗'},{tagName:'已驱虫'}],
					},
					{
						petName:'流心奶黄包',
						petAge:'4-6月',
						petStory:'流浪狗狗,搬家时在路边捡到的······',
						ImageUrl:"https://n.sinaimg.cn/sinacn14/275/w640h435/20180425/1f47-fzqvvsc1428800.jpg",
						tagList:[{tagName:'已疫苗'},{tagName:'已驱虫'}],
					},
				],
				//标签类型
				tagType:"",
				//水平对齐方式
				horizontal: 'right',
				//垂直对齐方式
				vertical: 'bottom',
				//展开菜单显示方式
				direction: 'vertical',
				// 可选样式配置项
				pattern: {
					// 文字默认颜色
					color: '#ffffff',
					// 文字选中时的颜色
					selectedColor: '#ffffff',
					// 背景色
					backgroundColor: '#5555ff',
					// 按钮背景色
					buttonColor: '#ffffff',
					// 图标
					icon:'chatboxes-filled',
					// 图标颜色
					iconColor: '#b0b0b0',
				},
				// 展开菜单内容配置项
				content: [
					{
						// iconPath: '/static/image.png',
						// selectedIconPath: '/static/image-active.png',
						// text: '相册',
						// active: false
					},
					
				]
			}
		},
		created() {
			
			this.getNoticeList();
		},
		methods: {
			// 获取通告
			getNoticeList(){
				listNotice().then(res =>{
					this.noticeContent = res.rows[0].noticeContent;
					// console.log(res.rows);
				})
			},
			//
			onchange(e) {
				this.petCity = e.detail.value[1].text;
				this.isShow = this.petCity ==="全国"?false:true
				console.log(e.detail.value[0].text+'-'+e.detail.value[1].text+'-'+e.detail.value[2].text);
				// this.isShow = true;
				console.log(e)
			},
			popupclosed(){
				// this.$refs.picker.clear();
			},
			//
			clearCity(){
				this.$refs.picker.clear();
				this.isShow = false;
				// this.children = "";
			},
			//
			randomType(){
				var typeList = ["primary","success","warning","error"];
				this.tagType = typeList[Math.floor(Math.random() * 4)];
			},
			//宠物领养详情
			handleAdoptionInfo(index){
				uni.navigateTo({
					url:'/pages/pet/adoption/adoptionInfo?id='+index
				})
			},
			//发布宠物领养
			addPetAdoption(){
				uni.navigateTo({
					url:'/pages/pet/adoption/addAdoption'
				})
			},
		}
	}
</script>

<style>
.card{
	height: 300rpx;
	border:2px solid #b9b9b9;
	border-radius: 4%;
	box-shadow: 1px 5px 8px rgba(102, 102, 102, 0.8);
	
}
.floating-div {
  position: absolute; /* 设置为绝对定位 */
  right: 10rpx; /* 距离右边界0像素 */
  top: 0; /* 距离顶部边界0像素 */
  width: 120rpx; /* 悬浮div宽度 */
  height: 40rpx; /* 悬浮div高度 */
  text-align: center;
  box-shadow: 1px 5px 8px rgba(0, 170, 2, 0.5);
  background-color: #00aa00;
  border-radius: 0 50% 0 50%;
  color: #fff;
  font-size: 22rpx;
}
.floatBtn{
	/* background-color: rgba(227, 227, 227, 0.8); */
	text-align: center;
	position: fixed;
	right: 5%;
	bottom: 10%;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 50%;
	box-shadow: 1px 5px 8px rgba(222, 222, 222, 0.5);
}
.input-border {
	/* border: 1px solid #b3e5fc; */
	border-radius: 5px;
	padding: 2px 4px;
}

.input-selected {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	line-height: 2;
}
</style>
